<!-- 故障分析-->

<template>
    <div class="wrapper faultThematicContainer">
        <el-scrollbar style="height:100%">
            <!-- 全局过滤条件 -->
            <GlobalSearch />
            <!-- 核心指标 -->
            <div class="coreBox module">
                <div class="title">核心指标</div>
                <div class="content">
                    <template v-if="coreDatas.length > 0">
                        <div class="item" v-for="item, index in coreDatas" :key="index">
                            <div class="left">
                                <span class="name">{{ item.title }}</span>
                                <span class="number">{{ getCoreValue(item.value) }}</span>
                            </div>
                            <div class="right">
                                <img :src="require(`../../../assets/img/thematic/${index % 10 + 1}.png`)" alt="">
                            </div>
                        </div>
                    </template>
                    <div class="tipBox" v-else>
                        <div v-if="coreLoading" class="loadingBox">
                            <i class="el-icon-loading"></i>
                            <span>加载中...</span>
                        </div>
                        <span v-else class="noData">暂无数据</span>
                    </div>
                </div>
            </div>
            <!-- 专项分析 -->
            <div class="specialAnalysisBox module">
                <div class="header">
                    <div class="left">
                        <i class="t-icon ticon" :class="theme === 'dark' ? 't-icon-zhuanxiangfenxi' : 't-icon-zhuanxiangfenxi-white'"></i>
                        <span class="title">专项分析</span>
                    </div>
                    <div class="right"></div>
                </div>
                <div class="content">
                    <template v-if="specialDatas.length > 0">
                        <div class="chartItem"
                            :class="{ 'fullChartItem': (index === 0 && (specialDatas.length & 2 !== 0)) }"
                            v-for="item, index in specialDatas" :key="item.id" :id="`special_${index}`"></div>
                    </template>
                    <div class="tipBox" v-else>
                        <div v-if="specialLoading" class="loadingBox">
                            <i class="el-icon-loading"></i>
                            <span>加载中...</span>
                        </div>
                        <span v-else class="noData">暂无数据</span>
                    </div>
                </div>
            </div>
            <!-- 多维分析 -->
            <div class="multiAnalysisBox module">
                <div class="header">
                    <div class="left">
                        <i class="t-icon ticon"
                            :class="theme === 'dark' ? 't-icon-duoweifenxi' : 't-icon-duoweifenxi-white'"></i>
                        <span class="title">多维分析</span>
                    </div>
                    <div class="right">
                        <el-dropdown trigger="hover" :hide-on-click="false" placement="bottom">
                            <i class="el-icon-arrow-down el-icon-more"></i>
                            <template #dropdown>
                                <el-dropdown-menu class="thematicDropdown">
                                    <el-dropdown-item>
                                        <span @click="handleDownload" class="download item">下载</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="content">
                    <!-- 局部过滤条件 -->
                    <GlobalSearch type="local" :multiLoading="multiLoading" @handleSearch="handleSearch" />
                    <!-- 指标、维度过滤 -->
                    <div class="fieldBox">
                        <div class="left">
                            <el-dropdown trigger="click" :hide-on-click="false" placement="bottom-start">
                                <div class="btnBox">
                                    <span>维度池</span>
                                    <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu class="thematicDropdown">
                                        <el-scrollbar style="height:162px">
                                            <el-dropdown-item v-for="item in demensionDatas" :key="item.value">
                                                <el-checkbox v-model="item.checked">{{ item.label }}</el-checkbox>
                                            </el-dropdown-item>
                                        </el-scrollbar>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-dropdown trigger="click" :hide-on-click="false" placement="bottom-end">
                                <div class="btnBox">
                                    <span>指标池</span>
                                    <i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                                </div>
                                <template #dropdown>
                                    <el-dropdown-menu class="thematicDropdown">
                                        <el-dropdown-item v-for="item in indexDatas" :key="item.value">
                                            <el-checkbox v-model="item.checked">{{ item.label }}</el-checkbox>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="tableBox">
                        <!-- 报表表格组件-->
                        <ReportTable :loading="loading" :tableData="multiDatas.tableData" :pageInfo="pageInfo"
                            :summaryData="summaryData" :tableColumnData="multiDatas.tableColumnData" :tableColumnWidthData="tableColumnWidthData" />
                    </div>
                    <footer>
                        <!-- 报表表格分页组件-->
                        <ReportTablePage v-model:pageInfo="pageInfo" @handleSearchForm="handleSearchForm" />
                    </footer>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';

import { deepCopy } from '@/utils/utilFns';

import GlobalSearch from './c/globalSearch.vue';
// import ReportTable from '@/components/reportTable/index.vue';
import ReportTablePage from '@/components/reportTablePage/index.vue';

const themeStore = useThemeStore();
const { theme } = storeToRefs(themeStore);

// 默认分页数据
const defaultPageInfo = {
    currentPage: 1,
    pageSize: 20,
    total: 0
};

// 核心指标数据
const coreDatas = ref([]);
// 专项分析数据
const specialDatas = ref([]);
// 多维分析数据
const multiDatas = reactive({
    // 表头
    columnDatas: [],
    // 表格数据
    tableDatas: []
});
// 维度数据
const demensionDatas = ref([
    // {
    // 	label: '标识',
    // 	value: 'record_key_tag',
    // 	checked: true
    // },{
    // 	label: '所属组织ID',
    // 	value: 'org_id',
    // 	checked: true
    // }, 
    {
        label: '所属组织名称',
        value: 'org_name',
        checked: true
    }, {
        label: '设备型号',
        value: 'vehicle_model',
        checked: true
    }, {
        label: '日期',
        value: 'pdate',
        checked: true
    }, {
        label: '设备编号',
        value: 'vehicle_number',
        checked: true
    }, {
        label: '车架号',
        value: 'vehicle_vin',
        checked: true
    }, {
        label: '故障码',
        value: 'fault_code',
        checked: true
    }, {
        label: '故障名称',
        value: 'fault_name',
        checked: true
    }, {
        label: '故障等级',
        value: 'fault_level',
        checked: true
    }, {
        label: '故障模块',
        value: 'fault_type',
        checked: true
    }, {
        label: '版本号',
        value: 'versions',
        checked: true
    }, {
        label: '驾驶模式',
        value: 'driver_mode',
        checked: true
    }, {
        label: '产品模式',
        value: 'product_mode',
        checked: true
    },
]);
// 指标数据
const indexDatas = ref([
    {
        label: 'MPF',
        value: 'fault_mpf',
        checked: true
    }, {
        label: '百公里故障数',
        value: 'fault_num_100km',
        checked: true
    }, {
        label: '故障总数',
        value: 'fault_num',
        checked: true
    }, {
        label: '故障总时长',
        value: 'fault_duration',
        checked: true
    }
]);
// 分页数据
const pageInfo = reactive(deepCopy(defaultPageInfo));
// 汇总数据
const summaryData = ref({});
// 表头宽度数据
const tableColumnWidthData = {
    record_key_tag: 250, 
    fault_duration: 120,
    fault_name: 180,
    fault_num_100km: 120,
    vehicle_vin: 200,
    org_id: 250,
    fault_code: 125
};

const getCoreValue = (value) => {
    if (!value) return '--';

    return Number(value).toLocaleString();
};


</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>